import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { companyApi, riverApi, xhImformationApi } from '@/apis'
import { editCompany } from '@/apis/companyTypes'
import { ProTableRef } from '@/components'
import { useBack } from '@/hooks/useBack'
import { debounce } from '@/utils/throttle'

export default defineComponent({
  name: 'EditInformation',

  setup() {
    const route = useRoute()
    const router = useRouter()
    const selectParentName = ref()
    const data = ref({} as editCompany)
    const nameList1 = ref([] as any[])
    const parentId = ref()
    const loading = ref(false)
    const tableRef = ref({} as ProTableRef)
    const { handleCancel } = useBack('refreshSalesCompanysList')
    function cancel() {
      handleCancel()
    }
    function selectLevel(level) {
      if (level === 0) {
        return '暂无'
      }
      if (level === 1) {
        return '群主'
      }
      if (level === 2) {
        return '副群主'
      }
      if (level === 3) {
        return '预备群主'
      }
      if (level === 4) {
        return '预备副群主'
      }
      if (level === 5) {
        return '考核预备群主'
      }
      if (level === 6) {
        return '考核预备副群主'
      }
    }
    function selcettype(type) {
      if (type === 0) {
        return '暂无'
      }
      if (type === 1) {
        return '预备'
      }
      if (type === 2) {
        return '正式'
      }
    }
    function clear1() {
      parentId.value = null
    }
    function test1(item) {
      debounce(async () => {
        try {
          const namelistarr = await xhImformationApi.getParentName({
            accountName: item
          })
          nameList1.value = namelistarr.dataList
        } finally {
        }
      })
    }
    function selectId1(value) {
      parentId.value = value
    }
    async function saveInformation() {
      try {
        await companyApi
          .editCompany({
            id: data.value.id,
            belongtoMemberId: parentId.value,
            status: data.value.status,
            contacts: data.value.contacts
          })
          .then(() => {
            handleCancel()
            message.success('保存成功')
          })
      } finally {
      }
    }
    async function orderDetail() {
      try {
        loading.value = true
        data.value = await companyApi.companyDetail(route.query.id)
        parentId.value = data.value.belongtoMemberId
      } finally {
        loading.value = false
      }
    }
    onMounted(() => {
      orderDetail()
    })
    return {
      saveInformation,
      loading,
      data,
      nameList1,
      selectLevel,
      selectId1,
      clear1,
      selcettype,
      cancel,
      orderDetail,
      test1
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form onSubmit={this.saveInformation} labelCol={{ span: 8 }}>
          <Row
            type="flex"
            style={{
              marginTop: '10px',
              marginRight: '50px',
              borderBottom: '1px solid 	#F5F5F5'
            }}
            gutter={[8, 16]}
          >
            <Col span={6}>
              <FormItem label="基本账号姓名：">
                <Input
                  v-model:value={this.data.memberName}
                  style="width:200px"
                  disabled
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="基本账号ID：">
                <Input
                  disabled
                  v-model:value={this.data.memberId}
                  style="width:200px"
                />
              </FormItem>
            </Col>
          </Row>
          <Row
            type="flex"
            style={{
              marginTop: '10px',
              marginRight: '50px'
            }}
            gutter={[8, 16]}
          >
            <Col span={6}>
              <FormItem label="销售公司ID：">
                <Input
                  disabled
                  v-model:value={this.data.id}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="销售公司全称：">
                <Input
                  disabled
                  v-model:value={this.data.funame}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="销售公司简称：">
                <Input
                  disabled
                  v-model:value={this.data.companyShortname}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="状态：">
                <Select v-model:value={this.data.status} style="width:200px">
                  <SelectOption value={1}>已开通</SelectOption>
                  <SelectOption value={2}>已停业</SelectOption>
                  <SelectOption value={0}>开通中</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="公众号简称：">
                <Input
                  disabled
                  v-model:value={this.data.wxmpShortname}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="法人：">
                <Input
                  disabled
                  v-model:value={this.data.accountName}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="公司注册地址：">
                <Input
                  disabled
                  v-model:value={this.data.registerAddress}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="联系人：">
                <Input v-model:value={this.data.contacts} style="width:200px" />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="联系人电话：">
                <Input
                  disabled
                  v-model:value={this.data.phone}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="对公银行：">
                <Input
                  disabled
                  v-model:value={this.data.bankBranchName}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="对公银行账号：">
                <Input
                  disabled
                  v-model:value={this.data.bankAccountNo}
                  style="width:200px"
                />
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="所属服务商：">
                <Select
                  filterOption={false}
                  showSearch={true}
                  value={this.data.belongtoMemberName}
                  placeholder="请输入"
                  onClear={this.clear1}
                  option-label-prop="label"
                  style="width: 200px"
                  dropdownMatchSelectWidth={false}
                  onSearch={num => this.test1(num)}
                  onChange={this.selectId1}
                  allowClear
                >
                  {this.nameList1.map(v => (
                    <SelectOption value={v.id} label={v.accountName}>
                      {`${v.accountName} ${this.selectLevel(v.positionLevel)}
                      ${v.combatTeam || ''}
                      ${v.serviceProviderName || ''}
                      ${this.selcettype(v.serviceProviderType) || ''}`}
                    </SelectOption>
                  ))}
                </Select>
              </FormItem>
            </Col>
          </Row>
          <FormItem>
            <Button
              style={{
                marginLeft: '600px',
                marginTop: '20px',
                marginRight: '20px'
              }}
              onClick={() => this.cancel()}
            >
              取消
            </Button>
            <Button type="primary" onClick={() => this.saveInformation()}>
              保存
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
